<template>
  <view>
    <!-- <uv-navbar title="货源详情" :autoBack="true" :placeholder="true" bg-color="/static/img/bg_1.png" imgMode="aspectFill"></uv-navbar> -->
    <view class="topSty">
      <div style="height: 50rpx"></div>
      <div class="header">
        <div class="back center" @click="back">
          <image
            src="/static/icon/back.png"
            mode="widthFix"
            class="w-20"
          ></image>
        </div>
        {{$t('运输报价')}}
      </div>
      <view class="h-50">
        <!-- <route :allInfo="allInfo" /> -->
      </view>
    </view>
    <!-- <view class="wlxx">
			<view class="item_title">
				<view class="fz24 text-555 mt-10">
					{{$t('发布时间')}}：2024-12-21 10:35
				</view>
				<view class="fz24 text-333 mt-10 font-bold mr-5">
					{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物信息')}}
				</view>
				<view class="info">
					{{ [get(allInfo, "goods_info.title"), get(allInfo, "goods_info.goods_weight") + "吨", get(allInfo,
						"goods_info.goods_volume") + '立方米', get(allInfo, "goods_info.package.title")].filter(item =>
							item).join('/') || ''}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('业务需求')}}
				</view>
				<view class="info">
					<BusiRequire v-if="allInfo.goods_type == 0" :requireInfo="allInfo.demand" />
					<BusiRequire v-else requireInfo="1,2,3,4,5,6" />
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('运输方式')}}
				</view>
				<view class="info">
					{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value || '' }} -
					{{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }} - {{ get(allInfo, "vehicle_info.title") || '' }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货主出价')}}
				</view>
				<view class="info red">
					{{ allInfo.price_unit }}{{ allInfo.price || '' }}
				</view>
			</view>

			<view class="item_btn">
				<view class="btn">
					<image class="ico" src="/static/icon/share.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.exposure_number") || 0 }}</text>
				</view>
				<view class="btn">
					<image class="ico" src="/static/icon/eye.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.lookat_number") || 0 }}</text>
				</view>
				<view class="btn">
					<image class="ico" src="/static/icon/leaveWord.png" mode="widthFix"></image>
					<text>{{ get(allInfo, "attach.comment_number") || 0 }}</text>
				</view>
				<view class="btn_blue_big" @click="goDemand">
					{{$t('发货详情')}}
				</view>
			</view>
		</view> -->

    <view class="price_tab">
      <view class="item" :class="priceIndex == 0 ? 'hover' : ''" @click="clickPriceTab(0)">
        <view class="name">{{$t('综合')}}</view>
      </view>
      <view class="item" :class="priceIndex == 1 ? 'hover' : ''" @click="clickPriceioTab(1)">
        <view class="name">{{$t('报价')}}</view>
        <view class="arrow">
          <u-icon
            name="arrow-up-fill"
            :color="priceSort === 1 ? '#278AFF' : '#C8C8C8'"
            size="10"
          ></u-icon>
          <u-icon
            name="arrow-down-fill"
            :color="priceSort === 2 ? '#278AFF' : '#C8C8C8'"
            size="10"
          ></u-icon>
        </view>
      </view>
      <view class="item" :class="priceIndex == 2 ? 'hover' : ''" @click="clickPriceioTabTime(2)">
        <view class="name">{{$t('时效')}}</view>
        <view class="arrow">
          <u-icon
            name="arrow-up-fill"
            :color="timeSort === 1 ? '#278AFF' : '#C8C8C8'"
            size="10"
          ></u-icon>
          <u-icon
            name="arrow-down-fill"
            :color="timeSort === 2 ? '#278AFF' : '#C8C8C8'"
            size="10"
          ></u-icon>
        </view>
      </view>
    </view>

    <view class="contentSty">
      <view v-for="(item, index) in allPriceList" :key="index">
        <FreightVehicles
          :carInfo="item"
          :allInfo="allInfo"
          :index="index"
          @hideItem="hideItem"
          @chooseCar="chooseCar"
          @cancelCooperate="cancelCooperate"
        />
      </view>
      <!-- :class="{
					price_list: item.vipStatus == true || item.vipStatus == false,
					hover: item.vipStatus == true
				}" -->
    </view>

    <div v-if="nomore" class="center text-gray-500 fz24 mt-20 pb-150">
      {{$t('没有更多了')}}
    </div>
    <view class="h-50"></view>
    <view class="footer_btn2">
      <!-- <view class="btn1" @click="changeDemand">
				{{$t('修改需求')}}
			</view> -->
      <view
        class="btn"
        :loading="submit_loading"
        :disabled="submit_loading"
        @click="sendChooseCar"
      >
        {{$t('确认发货')}}
      </view>
    </view>
  </view>
</template>

<script>
import route from "./components/route.vue";
import FreightVehicles from "./components/freightVehicles.vue";
import BusiRequire from "./components/busiRequire.vue";
import { getQuotationList, sendDelivery } from "@/api/order.js";
export default {
  components: {
    FreightVehicles,
    BusiRequire,
    route,
  },
  onLoad(options) {
    this.allInfo = JSON.parse(options.item);
    this.delivery_id = this.allInfo.id;
  },
  data() {
    return {
      priceIndex: 0,
      submit_loading: false,
      comprehensiveSort: 0,
      priceSort: 0,
      timeSort: 0,
      delivery_id: "",
      allPriceList: [],
      allInfo: {},
      carChooseList: [],
      transportList: [
        {
          key: "0",
          value: this.$t('不限'),
        },
        {
          key: "1",
          value: "其他 ",
        },
        {
          key: "2",
          value: this.$t('汽运'),
        },
        {
          key: "3",
          value: this.$t('空运'),
        },
        {
          key: "4",
          value: this.$t('海运'),
        },
        {
          key: "5",
          value: this.$t('铁路'),
        },
      ],
      demandList: {
        1: this.$t('运输'),
        2: this.$t('报关'),
        3: this.$t('转关'),
        4: this.$t('清关'),
      },
      businessList: [],
      carList: [],
      comprehensive: "",
      pricekey: "",
      validity: "",
      params: {
        delivery_id: "",
        page: 1,
        limit: 10,
        user_id: uni.getStorageSync("user_id") || "",
        price_order: "0",
        validity_order: "0",
        synthesis_order: "0",
        is_transport: "1",
      },
      nomore: false,
    };
  },
  mounted() {
    this.getPriceList();
  },
  methods: {
    clickPriceioTab(index){
			this.priceIndex = index;
			this.priceSort++;
			if (this.priceSort > 2) {
				this.priceSort = 0;
			}
			this.params.synthesis_order = "0";
			this.params.validity_order = "0";
			this.params.price_order = this.priceSort;
			this.getPriceList(true);
		},
		clickPriceioTabTime(index){
			this.priceIndex = index;
			this.timeSort++;
			if (this.timeSort > 2) {
				this.timeSort = 0;
			}
			this.params.synthesis_order = "0";
			this.params.price_order = "0";
			this.params.validity_order = this.timeSort;
			this.getPriceList(true);
		},
    goDemand() {
      uni.navigateTo({
        url: `/pages/shipmentRecord/sourceDeatil?item=${JSON.stringify(
          this.allInfo
        )}`,
      });
    },
    //下拉刷新
    onPullDownRefresh() {
      this.getPriceList(true);
    },
    //上拉加载
    onReachBottom() {
      this.params.page++;
      this.getPriceList();
    },
    getPriceList(init) {
      if (init) {
        this.params.page = 1;
        this.nomore = false;
      }
      this.params.delivery_id = this.delivery_id;
      getQuotationList(this.params).then((res) => {
        // this.slog(res)
        if (this.params.page == 1) {
          this.allPriceList = res.data.data.data || [];
        } else {
          this.allPriceList = [...this.allPriceList, ...res.data.data.data];
        }
        //当前请求的列表是空的 那就是没有更多了
        if (this.get(res, "data.data.data").length == 0) {
          this.nomore = true;
        }
        // 结束下拉刷新
        uni.stopPullDownRefresh();
      });
    },
    clickPriceTab(index) {
      this.priceIndex = index;
			// 重置所有排序状态
			this.comprehensiveSort = 0;
			this.priceSort = 0;
			this.timeSort = 0;
			// 重置排序参数
			this.params.synthesis_order = "0";
			this.params.price_order = "0";
			this.params.validity_order = "0";
			this.getPriceList(true);
    },
    upFillAll(type) {
      if (this.priceIndex !== 0) return;
      this.comprehensiveSort = type === '1' ? 1 : 2;
      this.sortList('comprehensive');
    },
    upFillPrice(type) {
      if (this.priceIndex !== 1) return;
      this.priceSort = type === '1' ? 1 : 2;
      this.sortList('price');
    },
    upFillTime(type) {
      if (this.priceIndex !== 2) return;
      this.timeSort = type === '1' ? 1 : 2;
      this.sortList('time');
    },
    sortList(type) {
      if (!this.allPriceList || this.allPriceList.length === 0) return;
      
      switch(type) {
        case 'comprehensive':
          this.allPriceList.sort((a, b) => {
            if (this.comprehensiveSort === 1) {
              return a.comprehensive - b.comprehensive;
            } else if (this.comprehensiveSort === 2) {
              return b.comprehensive - a.comprehensive;
            }
            return 0;
          });
          break;
        case 'price':
          this.allPriceList.sort((a, b) => {
            if (this.priceSort === 1) {
              return a.price - b.price;
            } else if (this.priceSort === 2) {
              return b.price - a.price;
            }
            return 0;
          });
          break;
        case 'time':
          this.allPriceList.sort((a, b) => {
            if (this.timeSort === 1) {
              return a.time - b.time;
            } else if (this.timeSort === 2) {
              return b.time - a.time;
            }
            return 0;
          });
          break;
      }
    },
    cancelCooperate(info) {
      const index = this.carChooseList.findIndex((item) => item.id == info.id);
      this.carChooseList.splice(index, 1);
    },
    chooseCar(carInfo) {
      this.carChooseList.push(carInfo);
    },
    hideItem(hideitem) {
      this.allPriceList = this.allPriceList.filter(
        (item) => item.id !== hideitem.id
      );
    },
    sendChooseCar() {
      if (this.carChooseList.length == 0) {
        uni.$u.toast("请选择合作对象");
      } else {
        const some = this.carChooseList.some((item) => item.car.status == 3);
        if (some) {
          uni.$u.toast("该车辆已在订单中，等待订单结束后即可合作");
          return;
        }
        let ids = [];
        this.carChooseList.forEach((ele)=> {
          ids.push(ele.id)
        })
        uni.showModal({
          title: this.$t('提示'),
          content: this.$t('确定要发货吗'),
          success: (res) => {
            if (res.confirm) {
              this.submit_loading = true;
              sendDelivery({
              	is_transport: '1',
              	quota_id: ids.join(','),
              	user_id: uni.getStorageSync("user_id") || '',
              	delivery_id: this.delivery_id
              }).then(res => {
              	if (res.data.code == 200) {
              		uni.$u.toast(this.$t('发货成功'))
              		setTimeout(() => {
              			uni.redirectTo({
              				url: '/pages/shipmentRecord/index?index=2'
              			})
              		}, 500)

              	} else {
              		uni.$u.toast(res.data.message)
              	}
              	sedtTimeout(() => {
              		this.submit_loading = false
              	})
              })
            }
          },
        });
      }
    },
    changeDemand() {
      uni.$u.toast(this.$t('敬请期待'));
    },
    back() {
      // uni.navigateBack()
      this.cback();
    },
    toQuoDetail(params) {
      console.log("9099---====", params);
      uni.navigateTo({
        url: `/pages/shipmentRecord/quotationInfo?item=${JSON.stringify({
          orderInfo: this.allInfo,
          quoInfo: params,
          is_transport: "1",
        })}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6f7fb;
}

.topSty {
  border-radius: 0 0 40rpx 40rpx;
  background: #f6f7fb url("/static/bg/backcolorImg.png") no-repeat top / 100%;
  // position: fixed;
  // width: 100%;
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  line-height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding-top: var(--status-bar-height);
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  top: 15rpx;
}

.price_list {
  margin: 20rpx 24rpx 0;
  position: relative;
  border-radius: 26rpx;
  background: #fff;
  box-shadow: 2rpx 4rpx 13.9rpx 0rpx rgba(0, 0, 0, 0.05);

  &.hover {
    border-radius: 30rpx;
    border: 2rpx solid #ffc936;
    background: linear-gradient(
      189deg,
      #ffd572 -12.4%,
      #fff2d9 6.59%,
      #fff 25.33%,
      #fff 56.91%
    );

    .price_vip {
      display: flex;
    }
  }

  .price_vip {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 96rpx;
    height: 40rpx;
    flex-shrink: 0;
    border-radius: 0px 26rpx;
    background: #fb0;
    align-items: center;
    justify-content: center;

    .ico {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .info {
    padding: 20rpx 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    .item {
      width: 50%;
      color: #535353;
      font-size: 26rpx;
      line-height: 28rpx;
      padding: 20rpx 24rpx;

      text {
        padding-left: 16rpx;
        color: #1d1d1d;
        font-size: 28rpx;
        line-height: 28rpx;

        &.red {
          color: #f53f3f;
        }
      }
    }
  }

  .btns {
    border-top: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      width: 100%;
      text-align: center;
      line-height: 90rpx;
      color: #8c8c8c;
      font-size: 26rpx;
      border-left: 1rpx solid #f0f0f0;

      &:first-child {
        border: none;
      }

      &.yellow {
        color: #efb200;
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 90rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin: 0 24rpx;

    .ico {
      flex-shrink: 0;
      width: 40rpx;
      border-radius: 10rpx;
      margin-right: 15rpx;
    }

    .name {
      color: #1d1d1d;
      font-size: 28rpx;
      font-weight: 600;
      line-height: 28rpx;
    }
  }
}

.price_tab {
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .item {
    display: flex;
    align-items: center;
    width: 30%;
    padding: 20rpx 0;
    cursor: pointer;

    &.hover {
      .name {
        color: #278aff;
        font-weight: 600;
      }
    }

    .name {
      color: #535353;
      font-size: 26rpx;
      font-weight: 600;
      line-height: 26rpx;
      padding-right: 6rpx;
    }

    .arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 4rpx;
    }
  }
}

.contentSty {
  // padding-bottom: 120rpx;
}

.city {
  padding: 50rpx 60rpx;
  display: flex;
  // align-items: center;
  justify-content: space-evenly;
  background: #fff;
  border-radius: 0 0 40rpx 40rpx;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);

  .line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: -24rpx;

    .text {
      color: #278aff;
      font-size: 26rpx;
      font-weight: 500;
      line-height: 28rpx;
    }

    .ico {
      width: 50%;
    }
  }

  .citySty {
    color: #535353;
    font-family: "PingFang SC";
    font-size: 22rpx;
    font-style: normal;
    font-weight: 400;
    margin-top: 16rpx;
  }

  .city_item {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    .ico {
      flex-shrink: 0;
      width: 50rpx;
      margin-right: 10rpx;
    }

    .name {
      font-size: 28rpx;
      font-weight: 600;
      line-height: 40rpx;
      word-break: break-word;
    }
  }
}

.wlxx {
  background: #fff;
  border-radius: 30rpx;
  margin: 25rpx;
  padding: 0 30rpx 20rpx;

  .item_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #eee;
    padding-top: 20rpx;
    margin-top: 15rpx;

    .btn_blue_big {
      margin-left: auto;
      width: 320rpx;
      height: 70rpx;
      flex-shrink: 0;
      text-align: center;
      line-height: 70rpx;
      color: #fff;
      font-size: 28rpx;
      background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
      border-radius: 40rpx;
    }

    .btn {
      display: flex;
      align-items: center;
      margin-right: 20rpx;

      .ico {
        flex-shrink: 0;
        width: 28rpx;
        height: 28rpx;
        margin-right: 6rpx;
      }

      text {
        display: block;
        color: #8c8c8c;
        font-size: 22rpx;
        line-height: 24rpx;
      }
    }
  }

  .item_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 15rpx;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
  }

  .name {
    flex-shrink: 0;
    color: #535353;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  .info {
    color: #333;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 600;

    .ico {
      width: 44rpx;
      height: 44rpx;
      margin-left: 12rpx;
    }

    &.red {
      color: #f53f3f;
      font-weight: 600;
    }
  }
}

.footer_btn2 {
  width: 100%;
  height: 128rpx;
  background: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 0;

  .btn1 {
    width: 334rpx;
    height: 94rpx;
    flex-shrink: 0;
    border-radius: 500rpx;
    border-radius: 500px;
    border: 1px solid #8c8c8c;
    line-height: 94rpx;
    text-align: center;
    color: #8c8c8c;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
  }

  .btn {
    width: 96%;
    height: 94rpx;
    flex-shrink: 0;
    border-radius: 500rpx;
    border: 2rpx solid rgba(3, 189, 130, 0.1);
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    line-height: 94rpx;
    text-align: center;
    color: #fff;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 600;
  }
}
</style>
